// ==UserScript==
// @name         流程单打印模板
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  调整流程单打印格式!
// @author       Mr.Shi
// @match        https://www.darkroom.net/deck/order/view/*/sheet
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// @downloadURL  none
// @updateURL    none
// ==/UserScript==

function setlogo(){
 // 大段HTML内容
  var largeHtml = `
<style type="text/css">
  .fkbox {
  display: inline-block;
  padding: 0.4em 0.4em;
  margin: 0 0.5em -0.1em 0.1em;
  border: 1px solid #000;
  background-color: #ffff;
  border-radius: 3px;
}
.mb2em {
    margin-bottom: 0em;
}
.mt-md-1em{
    margin-top: 0em;
}
</style>

<div class="box">
	<div class="col col-5">
				<h5 class="">修片要求（以此记载为准）：</h5>
				<hr>
					<h5>肤色<span class="fkbox"></span> 面宽<span class="fkbox"></span> 眼睛<span class="fkbox"></span> 发际线<span class="fkbox"></span> </h5>
					<hr>
					<h5 class="mt0">祛痣<span class="fkbox"></span> 祛斑<span class="fkbox"></span> 其它要求：</h5>
					<hr>
                    <h5 class="mt0"><p style="border-top:0px solid #222;line-height:0.1;height:0.1em;" class="mt2em"></p></h5>
					<hr>
					<h5 class="mt0"><p style="border-top:0px solid #222;line-height:0.1;height:0.1em;" class="mt2em"></p></h5>
					<hr>
                    <h5 class="mt0"><p style="border-top:0px solid #222;line-height:0.1;height:0.1em;" class="mt2em"></p></h5>
					<hr>
                     <h5 class="mt0"><p style="border-top:0px solid #222;line-height:0.1;height:0.1em;" class="mt2em"></p></h5>
					<hr>
	</div>
	<div class="col col-7" style="padding-left:6em">
				<h5 class="">服务体验：<span class="float-right">★★★★★星级评价</span></h5>
					<hr>
					<h5 class="mt0">客服：<span class="float-right">★<span class="fkbox"></span>2★<span class="fkbox"></span>3★<span class="fkbox"></span>4★<span class="fkbox"></span>5★<span class="fkbox"></span></span></h5>
					<hr>
                    <h5 class="mt0">化妆：<span class="float-right">★<span class="fkbox"></span>2★<span class="fkbox"></span>3★<span class="fkbox"></span>4★<span class="fkbox"></span>5★<span class="fkbox"></span></span></h5>
					<hr>
					<h5 class="mt0">摄影：<span class="float-right">★<span class="fkbox"></span>2★<span class="fkbox"></span>3★<span class="fkbox"></span>4★<span class="fkbox"></span>5★<span class="fkbox"></span></span></h5>
					<hr>
                    <h5 class="mt0">选片：<span class="float-right">★<span class="fkbox"></span>2★<span class="fkbox"></span>3★<span class="fkbox"></span>4★<span class="fkbox"></span>5★<span class="fkbox"></span></span></h5>
					<hr>
                    <h5 class="mt0">后期：<span class="float-right">★<span class="fkbox"></span>2★<span class="fkbox"></span>3★<span class="fkbox"></span>4★<span class="fkbox"></span>5★<span class="fkbox"></span></span></h5>
					<hr>
                     <h5 class="mt0"><p style="border-top:0px solid #222;line-height:0.1;height:0.1em;" class="mt2em"></p></h5>
					<hr>
	</div>
</div>
<p style="border-top:3px solid #222;line-height:0.1;height:0.1em;"></p>
<div class="box">选片服务结束确认：(同意√；不同意×)
	<div class="col col-11" style="padding-left:3em">
    1、一经确认，所选照片不退不换。<span class="fkbox"></span><br>
    2、同意本次拍摄的照片用于分享，不需另外授权。<span class="fkbox"></span></div><hr>
    <div class="col col-8"><span class="float-right">签字确认：</span></div><div class="col col-4" style="padding-left:6em">日期：</div>
    </div>
</div>
  `;

    // 在class "container" 的元素之前插入页头HTML
    var htmlToInsert = '<div class="box"><div class="col col-3">&nbsp; </div><div class="col col-6 align-center"><img src="https://img-repo-intl.imdr.cn/dr/bed-140938/poQaM98pNhKSCdGd.png!w640.jpg"/ style=height:60px;" ></div><div id="d1" class="col col-3"></div></div>';
    // 获取元素
    var elements = document.getElementsByClassName("container");
    elements[0].insertAdjacentHTML('afterBegin', htmlToInsert);


    // 创建一个新的div元素
    var newDiv = document.createElement("div");
    // 给新元素添加一个class名
    newDiv.className = "new-class";
    // 给新元素添加内容
    newDiv.innerHTML = largeHtml;
    // 通过class名找到需要添加元素的父元素
    //var parentDiv = document.querySelector(".container");
    // 在父元素的末尾添加新元素
    //parentDiv.appendChild(newDiv);
     elements[0].insertAdjacentHTML('beforeEnd', largeHtml);

    // 遍历这些元素
    for (var i = 0; i < elements.length; i++) {
        // 获取每个元素中的第一个 <p> 标签
        var p = elements[i].getElementsByTagName("p")[2];
        // 修改 <p> 标签的 CSS 类名，从而改变其样式
        p.className = "mt2em";
    }

}

    function s() {

        // 创建一个新的Date对象，它将包含当前日期和时间
        const now = new Date();

        // 获取年、月、日
        const year = now.getFullYear(); // 获取年份
        const month = now.getMonth() + 1; // 获取月份，+1因为getMonth()返回的月份从0开始
        const day = now.getDate(); // 获取日

        // 获取小时、分钟、秒
        const hours = now.getHours(); // 获取小时
        const minutes = now.getMinutes(); // 获取分钟
        const seconds = now.getSeconds(); // 获取秒

        // 输出格式化的当前日期和时间
         document.getElementById("d1").innerHTML = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} 打印`;
    }
    //设置定时器，第一个参数是执行的方法，第二个是时间1000代表一秒


(function() {
     setTimeout(setlogo,100);
    // setInterval(s, 1000);
})();